.menu {
	width: 100%;
	height: 100%;
	display: flex;
	color: white;
	font-size: max(7vh, 16px);
	.menu-cards {
		position: relative;
		min-width: max(60%, 90vh);
		height: 100%;
		.cards {
			position: absolute;
			height: 45vh;
			width: calc(45vh / 1.45);
			transition: all 0.4s ease;
			transform:
				translate(min(45vh - (45vh / 1.45) / 2, 30vw), 10vh)
				rotateZ(var(--rotate));
			transform-origin: 50% 100%;
			&:hover {
				cursor: pointer;
			}
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
	.menu-items {
		position: relative;
		height: 100%;
		height: 90vh;
		display: grid;
		gap: 10px;
		align-content: center;
		align-items: center;
		span {
			transition: all 0.4s ease;
			text-shadow: var(--shadow);
			&:hover {
				cursor: pointer;
			}
		}
	}
	.menu-pointer {
		position: absolute;
		text-shadow:
			0 0 5px aqua,
			0 0 10px aqua,
			0 0 20px aqua,
			0 0 40px aqua;
		transition: all 0.4s ease;
		transform: translate(var(--x), var(--y));
	}
}